import type { HallItemData } from './interface';

export const itemSize = screenWidth / 5;

class HallItem {
    data: HallItemData;
    private box: UiBox | null = null;
    private preview: UiImage | null = null;
    private title: UiText | null = null;
    private author: UiText | null = null;
    private desc: UiText | null = null;
    private typeLabel: UiBox | null = null;
    private typeText: UiText | null = null;

    constructor() {
        this.data = {
            id: '',
            type: '',
            title: '',
            author: '',
            description: '',
            image: '',
            link: '',
        };
    }

    create(parent: UiNode): void {
        // 创建容器
        this.box = UiBox.create();
        this.box.parent = parent;

        // 设置背景颜色
        const bgColor = Vec3.create({ r: 55, g: 55, b: 65 });
        this.box.backgroundColor.copy(bgColor);

        // 设置尺寸
        const size = Vec2.create({ x: itemSize, y: itemSize * 1.5 });
        this.box.size.offset.copy(size);

        // 启用指针事件
        this.box.pointerEventBehavior = PointerEventBehavior.ENABLE;

        // 创建预览图
        this.preview = UiImage.create();
        this.preview.parent = this.box;

        const previewSize = Vec2.create({
            x: itemSize * 0.9,
            y: itemSize * 0.9,
        });
        this.preview.size.offset.copy(previewSize);

        const previewPos = Vec2.create({
            x: itemSize * 0.05,
            y: itemSize * 0.05,
        });
        this.preview.position.offset.copy(previewPos);

        this.preview.image = this.data.image;
        this.preview.imageDisplayMode = ImageDisplayMode.Cover;

        // 创建标题
        this.title = UiText.create();
        this.title.parent = this.box;
        this.title.textContent = this.data.title;
        this.title.textFontSize = itemSize / 10;

        const titleColor = Vec3.create({ r: 255, g: 255, b: 255 });
        this.title.textColor.copy(titleColor);

        const titleSize = Vec2.create({ x: itemSize * 0.9, y: itemSize * 0.1 });
        this.title.size.offset.copy(titleSize);

        const titlePos = Vec2.create({
            x: itemSize * 0.05,
            y: itemSize * 1.0,
        });
        this.title.position.offset.copy(titlePos);

        // 创建作者
        this.author = UiText.create();
        this.author.parent = this.box;
        this.author.textContent = `作者: ${this.data.author}`;
        this.author.textFontSize = itemSize / 15;

        const authorColor = Vec3.create({ r: 200, g: 200, b: 200 });
        this.author.textColor.copy(authorColor);

        const authorSize = Vec2.create({
            x: itemSize * 0.9,
            y: itemSize * 0.1,
        });
        this.author.size.offset.copy(authorSize);

        const authorPos = Vec2.create({
            x: itemSize * 0.05,
            y: itemSize * 1.1,
        });
        this.author.position.offset.copy(authorPos);

        // 创建描述
        this.desc = UiText.create();
        this.desc.parent = this.box;
        this.desc.textContent = this.data.description;
        this.desc.textFontSize = itemSize / 16;

        const descColor = Vec3.create({ r: 180, g: 180, b: 180 });
        this.desc.textColor.copy(descColor);

        const descSize = Vec2.create({ x: itemSize * 0.9, y: itemSize * 0.2 });
        this.desc.size.offset.copy(descSize);

        const descPos = Vec2.create({ x: itemSize * 0.05, y: itemSize * 1.2 });
        this.desc.position.offset.copy(descPos);

        this.desc.autoWordWrap = true;
        this.desc.textXAlignment = 'Left';
        this.desc.textYAlignment = 'Top';

        // 创建类型标签
        this.typeLabel = UiBox.create();
        // this.typeLabel.parent = this.box;

        const labelColor = Vec3.create({ r: 80, g: 120, b: 200 });
        this.typeLabel.backgroundColor.copy(labelColor);

        const labelSize = Vec2.create({ x: 80, y: 30 });
        this.typeLabel.size.offset.copy(labelSize);

        const labelPos = Vec2.create({ x: screenWidth - 220, y: 20 });
        this.typeLabel.position.offset.copy(labelPos);

        this.typeText = UiText.create();
        this.typeText.parent = this.typeLabel;
        this.typeText.textContent = this.getTypeName();
        this.typeText.textFontSize = itemSize / 20;

        const textColor = Vec3.create({ r: 255, g: 255, b: 255 });
        this.typeText.textColor.copy(textColor);

        this.typeText.size.offset.copy(Vec2.create({ x: 80, y: 30 }));
        this.typeText.textXAlignment = 'Left';
        this.typeText.textYAlignment = 'Top';
    }

    upDate(data: HallItemData): void {
        this.data = data;
        this.preview!.image = this.data.image;
        this.title!.textContent = this.data.title;
        this.author!.textContent = `作者: ${this.data.author}`;
        this.desc!.textContent = this.data.description;
        this.typeText!.textContent = this.getTypeName();
    }

    setPosition(x: number, y: number): void {
        if (!this.box) {
            return;
        }

        const position = Vec2.create({ x, y });
        this.box.position.offset.copy(position);
    }

    onClick(handler: () => void): void {
        if (this.box) {
            this.box.events.on('pointerup', handler);
        }
    }

    private getTypeName(): string {
        switch (this.data.type) {
            case 'map':
                return '地图';
            case 'model':
                return '模型';
            case 'video':
                return '视频';
            default:
                return '作品';
        }
    }

    show(): void {
        if (this.box) {
            this.box.visible = true;
        }
    }

    hide(): void {
        if (this.box) {
            this.box.visible = false;
        }
    }
}

export default HallItem;
